import { Character } from './character'
import ColorHash from 'color-hash'

const colorHash = new ColorHash({ lightness: 0.8, saturation: 0.6 })

const char = new Character('你')
const matrix = char.resolver.get_matrix()

const detail = document.getElementById('detail') as HTMLDivElement

matrix.forEach((row, x) => {
  const rowV = document.createElement('div')
  rowV.className = 'detail-row'
  rowV.id = rowId(x)
  row.forEach((cell, y) => {
    const cellV = document.createElement('div')
    cellV.className = 'detail-cell'
    cellV.id = cellId(x, y)
    cellV.style.background = `rgba(0,0,0,${cell / 256})`
    rowV.appendChild(cellV)
  })
  detail.appendChild(rowV)
})
let t1 = Date.now()
const islands = char.resolver.find_islands()
let t2 = Date.now()
console.log(`cost ${t2 - t1}ms to find islands: `, islands)

islands.forEach((island) => {
  const color = colorHash.hex(island.rect.join(', '))
  island.data.forEach((point) => {
    const [x, y] = point

    const v = getCellV(x, y)
    v.style.background = color
  })
})

function getCellV(x: number, y: number) {
  return document.getElementById(cellId(x, y)) as HTMLDivElement
}

function rowId(x: number) {
  return `detail-row[${x}]`
}

function cellId(x: number, y: number) {
  return `detail-cell[${x},${y}]`
}
